<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人信息-frm</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <script type="text/javascript" src="../../script/lib-flexible.js"></script>
    <style>
        html,
        body {
            background-color: #ededed;
        }

        .notice {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
        }

        .pic-top {
            position: relative;
            box-sizing: border-box;
            height: 3.8rem;
            width: 3.8rem;
            margin: 0 auto;
        }

        .pic-top img {
            height: 2.8rem;
            width: 2.8rem;
            padding: .5rem;
            border-radius: 50%;
        }

        .list {
            background-color: #fff;
            padding: .13rem;
            position: relative;
        }

        .list:after {
            content: "  ";
            position: absolute;
            left: 0;
            top: 0;
            width: 200%;
            height: 200%;
            border-top: 1px solid #ededed;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scale(.5, .5);
            transform: scale(.5, .5);
        }



        .item-name {
            font-size: 14px;
            line-height: 180%;
        }

        .item-title {
            font-size: 14px;
            line-height: 180%;
        }
    </style>
</head>

<body>
    <section class="notice">
        <div class="pic-top">
            <img src="../../image/defaults/defaulticonavatar.png" alt="" id="image" />
        </div>
        <div class="list flex-wrap" id="list">
            <div class="item-name">
                昵称
            </div>
            <div class="flex-con"></div>
            <div class="item-title" id="title">zhouheng</div>
        </div>
    </section>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../../script/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../../script/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../../script/easeChat.js"></script>
<script type="text/javascript">
    apiready = function() {
        fnInit();
    };

    //定义图片跟昵称
    function fnInit() {
        var image = $api.byId('image'),
            img = api.pageParam.img,
            title = $api.byId('title');
        $api.html(title, api.pageParam.nickname);

        if (img != "") {
            image.src = img;
        } else {
            image.src = '../../image/defaults/default_pic.png';
        }
    }
</script>

</html>
